<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摄影</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="bootstrap-3.3.7-dist/js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/together.css">
    <link rel="stylesheet" href="css/photography.css">
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <!--导航栏开始-->
    <div id="nav"></div>
    <!--导航栏结束-->

    <!--主体开始-->
    <div style="margin-top: 55px;">
        <div class="row row-no-gutters">
            <div class="col-xs-3 col-md-1"  >

            </div>

            <div class="col-xs-3 col-md-9" style="background-color: #1C2B40; height: 500px;margin: 0px 0px 0px 27px;padding: 0px;" >
                <div class="left">
                    <ul>
                        <li id="one">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                </div>
                <div class="right">
                    <div>
                        <div id="one1">
                            <div style="color: #fff9ec;height: 30px;width: 300px;background-color: #00F7DE;">120958</div>
                        </div>
                        <div>

                        </div>
                    </div>
                </div>
            </div>
            <div id="" class="col-xs-12 col-md-1" style=" ">

            </div>
        </div>

        <div class="row row-no-gutters">
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4"></div>
        </div>

    </div>
    <!--主体结束-->


</div>

<script>
    /*导航栏引进开始*/
    $(document).ready(function () {
        $('#nav').load('navigation.html');
    });
    /*导航栏引进结束*/
</script>

<script>
$(function (){
    //1.隐式迭代 给所有的li都绑定了点击事件
    $(" .left li").click(function (){
       //2.让当前元素变色,其余的姐妹元素不变色
       $(this).css({color:"#fff",backgroundColor:"rgb(44, 128, 138)"}).siblings().css({color:"",backgroundColor:""});
    });
})
</script>
</body>
</html>